<template>
	<view class="circle">
		<view class="circle_icon">
			<rui-icons icon="ble" size="50" color="#fff"></rui-icons>
		</view>
		<view class="container">
			<view class="container_circle"></view>
			<view class="container_circle"></view>
			<view class="container_circle"></view>
			<view class="container_circle"></view>
		</view>

		<view class="tips">
			<view class="tips_name">
				正在扫描
			</view>
			<view class="tips_desc">
				<view>
					请将手机靠近设备并触摸一下指纹头
				</view>
			</view>
		</view>
		<slot></slot>
	</view>

	<!-- <rui-button text="重新搜索"></rui-button> -->
</template>

<script>

</script>

<style lang="scss" scoped>
	.circle {
		position: relative;
		&_icon{
			position: absolute;
			top: 223rpx;
			left: 50%;
			transform: translate(-50%);
			z-index: 9999;
		}

		// &::before {
		// 	content: "";
		// 	display: block;
		// 	height: 100rpx;
		// 	width: 100rpx;
		// 	background: var(--color);
		// 	// border-radius: 50%;
		// 	filter: blur(100rpx);
		// 	position: absolute;
		// 	transform: rotate(30deg);
		// 	top: 150rpx;
		// 	left: 50rpx;
		// }

		// &::after {
		// 	content: "";
		// 	display: block;
		// 	height: 100rpx;
		// 	width: 200rpx;
		// 	background: var(--color);
		// 	border-radius: 50%;
		// 	filter: blur(80rpx);
		// 	position: absolute;
		// 	top: 150rpx;
		// 	right: -50rpx;
		// }
	}

	.tips {
		text-align: center;
		margin: 50rpx auto;

		&_name {
			font-size: 40rpx;
			// font-weight: bold;
			margin-bottom: 20rpx;
		}

		&_desc {
			color: var(--gray);
			font-size: 28rpx;
		}
	}

	.container {
		margin: 0 auto;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 500rpx;

		&_circle {
			position: absolute;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			background-color: var(--color);

			&:nth-child(1) {
				animation: anim 3s linear infinite;
			}

			&:nth-child(2) {
				animation: anim 3s linear 0.8s infinite;
			}

			&:nth-child(3) {
				animation: anim 3s linear 1.6s infinite;
			}

		}


	}



	@keyframes anim {
		from {
			opacity: 1;
			transform: scale(0);
		}

		to {
			opacity: 0;
			transform: scale(4);
		}
	}
</style>